<template>
  <div class="home-container">
    <my-aside :menuList="menuList"></my-aside>
    <el-main :style="mainMarLeft">
      <my-header></my-header>
      <router-view></router-view>
    </el-main>
  </div>
</template>

<script>
import myAside from '../components/my-aside.vue'
import myHeader from '../components/my-header.vue'
export default {
  name: 'home',
  data() {
    return {
      // 菜单列表
      menuList: [
        {
          icon: 'icon-keshihua',
          text: '数据统计',
          path: '/home/visual',
          subMenu: [],
        },
        {
          icon: 'icon-24gf-portraitMaleInfo3',
          path: '/home/user',
          text: '用户管理',
          subMenu: [],
        },
        {
          icon: 'icon-quanxian',
          text: '权限管理',
          subMenu: [
            {
              icon: 'icon-fenleiorguangchangorqitatianchong',
              text: '角色列表',
              path: '/home/role',
            },
            {
              icon: 'icon-fenleiorguangchangorqitatianchong',
              text: '权限列表',
              path: '/home/auth',
            },
          ],
        },
        {
          icon: 'icon-shangpin',
          text: '商品管理',
          subMenu: [
            {
              icon: 'icon-fenleiorguangchangorqitatianchong',
              text: '商品列表',
              path: '/home/goods',
            },
            {
              icon: 'icon-fenleiorguangchangorqitatianchong',
              text: '分类参数',
              path: '/home/params',
            },
            {
              icon: 'icon-fenleiorguangchangorqitatianchong',
              text: '商品分类',
              path: '/home/cate',
            },
          ],
        },
        {
          icon: 'icon-dingdan-quanbudingdan',
          text: '订单管理',
          path: '/home/order',
          subMenu: [],
        },
      ],
      isCollapse: false, // 菜单是否展开
    }
  },
  computed: {
    // 主体的左边距
    mainMarLeft() {
      return {
        'margin-left': `${this.isCollapse ? '64px' : '240px'}`,
      }
    },
  },
  components: {
    myAside,
    myHeader,
  },
  mounted() {
    this.$bus.$on('changeCollapse', flag => {
      this.isCollapse = flag
    })
  },
}
</script>

<style lang="scss">
.el-main {
  margin-left: 240px;
  padding: 0;
}
</style>
